<template>
  <div class="app-container">
    讲师列表
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="bannerQuery.title" placeholder="标题"/>
      </el-form-item>
       <el-form-item label="排序">
              <el-input-number v-model="bannerQuery.sort" :min="0" controls-position="right"/>
        </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker
          v-model="bannerQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="bannerQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
      <el-button type="text" @click="dialogBannerAddVisible=true">添加幻灯片</el-button>
    </el-form>
      <el-table
       :data="list"
       border
       fit
       highlight-current-row
       stripe
       style="width: 100%"
       >
    <el-table-column
      label="序号"
      width="70"
      align="center">
      <template slot-scope="scope">
          {{(current-1)*limit+scope.$index+1}}
      </template>
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题"
      width="80">
    </el-table-column>
    
    <el-table-column
      prop="imageUrl"
      label="图片地址"
      >
    </el-table-column>
    <el-table-column
      prop="linkUrl"
      label="路由路径"
      >
    </el-table-column>
    <el-table-column
      prop="gmtCreate"
      label="添加时间"
      width="160">
    </el-table-column>
    <el-table-column
      prop="sort"
      label="排序"
      width="60">>
    </el-table-column>
    <el-table-column
      label="操作"
      width="200" 
      align="center">
      <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="openEditBtn(scope.row.id)">修改</el-button>
           <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeBannerById(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination
    align="center"
      background
      layout="prev, pager, next"
       :total="total"
       :page-size="limit"
       :current-page="current"
       @current-change="getList">
    </el-pagination>
      <!-- 添加章节弹框 -->
    <el-dialog :visible.sync="dialogBannerFormVisible" title="修改幻灯片">
        <el-form :model="banner" label-width="120px">
            <el-form-item label="幻灯片标题">
                <el-input v-model="banner.title"/>
            </el-form-item>
            <el-form-item label="幻灯片排序">
                <el-input-number v-model="banner.sort" :min="0" controls-position="right"/>
            </el-form-item>
            <el-form-item label="路由路径">
                <el-input v-model="banner.linkUrl" :min="0" controls-position="right"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="exitEditBtn()">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        </div>
    </el-dialog>
  <!-- 添加幻灯片弹框 -->
    <el-dialog :visible.sync="dialogBannerAddVisible" title="添加幻灯片">
        <el-form :model="banner" label-width="120px">
        <el-form-item label="标题">
            <el-input v-model="banner.title"/>
        </el-form-item>
        <el-form-item label="排序">
            <el-input-number v-model="banner.sort" :min="0" controls-position="right"/>
        </el-form-item>
        <el-form-item label="路由路径">
            <el-input v-model="banner.linkUrl"/>
        </el-form-item>
          <el-form-item label="幻灯片上传">

            <!-- 头衔缩略图 -->
            <pan-thumb :image="banner.imageUrl"/>
            <!-- 文件上传按钮 -->
            <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
            </el-button>

                <!--
            v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调 -->
            <image-cropper
                          v-show="imagecropperShow"
                          :width="300"
                          :height="300"
                          :key="imagecropperKey"
                          :url="BASE_API+'/eduoss/fileoss/upload/avatar'"
                          field="file"
                          @close="close"
                          @crop-upload-success="cropSuccess"/>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
        <el-button @click="exitAddBtn()">取 消</el-button>
        <el-button :disabled="saveBannerBtnDisabled" type="primary" @click="saveBanner">确 定</el-button>
        </div>
    </el-dialog>
  </div>
  
</template>

<script>
import bannerApi from '@/api/edu/banner'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
   components: { ImageCropper, PanThumb },
    data(){
        return {
            list:null,
            current:1,
            limit:8,
            total:0,
            bannerQuery:{},
            dialogBannerFormVisible:false,
            banner:{
              imageUrl:''
            },
            dialogBannerAddVisible:false,
            imagecropperKey:0,
            imagecropperShow:false,
            BASE_API:'http://localhost:9001/',
            saveBannerBtnDisabled:false
        }
    },
     created(){
         this.getList()
     },
    methods:{
        getList(current = 1){
            this.current  = current
            bannerApi.getBannerList(this.current,this.limit,this.bannerQuery)
            .then(res=>{
                this.list = res.data.items
                this.total = res.data.total
            })
            
        },
        
        openEditBtn(id){
            this.dialogBannerFormVisible = true
            bannerApi.getBanner(id).then(response =>{
                this.banner = response.data.banner
            })
        },
        close(){
            this.imagecropperShow = false
            this.imagecropperKey = this.imagecropperKey+1
        },
        cropSuccess(resp){
            this.imagecropperShow=false
            this.banner.imageUrl = resp.url
            // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
            this.imagecropperKey = this.imagecropperKey + 1
        },
        saveBanner(){
          bannerApi.addBanner(this.banner).then(response =>{
            if(response.success){
              this.$message({
                 type: 'success',
                 message: '添加成功!'
               })
              this.dialogBannerAddVisible = false
              this.getList()
            }
          })
        },
        saveOrUpdate(){
            if(this.banner.id){
              this.updateBanner()
            }else{
              this.saveBanner()
            }
            this.banner = {}
        },
        updateBanner(){
          bannerApi.updateBanner(this.banner).then(response =>{
                this.dialogBannerFormVisible = false
                this.$message({
                 type: 'success',
                 message: '修改成功!'
               })
               this.banner = {}
               this.getList()
            })
        },
        exitEditBtn(){
            this.dialogBannerFormVisible = false
            this.banner = {}
        },
        exitAddBtn(){
          this.dialogBannerAddVisible = false
          this.banner = {}
        },
        // 清空操作
        resetData(){
            this.bannerQuery = {}
            this.getList()
        },
        removeBannerById(id){
            this.$confirm('此操作将永久删除该幻灯片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
             })
             .then(()=>{
                 bannerApi.deleteBanner(id).then(res=>{
                  this.getList(this.current)
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                })              
             })
             .catch(() => {
                 this.$message({
                     type: 'info',
                     message: '已取消删除'
                 });     
            });
        }
    }
}
</script>